<template>
    <el-select
    class="width_100"
      placeholder="请选择"
      v-model="selectValue"
      filterable
      collapse-tags
      collapse-tags-tooltip
      :clearable="clearable"
      :filter-method="handleQuerySearch"
      @change="handleQueryChange"
    >
      <el-option
        v-for="item in selectOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      <VabElSelectLoading
        :page="page"
        :loading="loading"
        :hasMore="hasMore"
        @loadMore="handleLoadMore"
      />
    </el-select>
  </template>
  
<script setup lang="ts">
/**
 * @import
 */
import { ref } from 'vue'
import { getProductSearchSelect } from '~/src/api/dms/product'
import _ from 'lodash';

/**
 * @props
 */
const props = defineProps({
    value: {
        type: String,
        default: '',
    },
    type: {
        type: String,
        default: '', // number, name, assistant_id, product_code
    },
    // 使用组织
    userOrgId: {
        type: String,
        default: '',
    },
    multiple: {
        type: Boolean,
        default: false,
    },
    clearable: {
        type: Boolean,
        default: true,
    },
})

/**
 * @var
 */

const proxy: any = getCurrentInstance()?.proxy
const page = ref(0)
const loading = ref(false)
const hasMore = ref(true)

const selectValue = ref<any>()
const sreachValue = ref<any>('')
const selectOptions = ref<any[]>([])

const emit = defineEmits(['LazyChange'])

/**
 * 加载数据列表
 */
const loadDataList = async () => {
    if (!props.userOrgId) {
        proxy.$Message('请选择使用组织，再进行操作！', 'warning')
        return
    }
    try {
        loading.value = true

        // 参数
        let data = {
            page: page.value,
            limit: 10,
            filter: {
                name: (props.type == '' || props.type == 'name') ? sreachValue.value : '', // 物料名称
                number: props.type == 'number' ? sreachValue.value : '', // 物料编码
                barcode: props.type == 'barcode' ? sreachValue.value : '', // 条码
                use_org_id: props.userOrgId || '', // 使用组织
            },
        }

        // api
        const res = await getProductSearchSelect({ ...data })

        // 遍历获取
        const list = res.data.list.map((item: any) => {
            // 复合查询
            if (!props.type) return { value: item.number, label: `${item.number}-${item.name}` }
            if (props.type == 'name') return { value: item.name, label: item.name }
            if (props.type == 'number') return { value: item.number, label: item.number }
        }) || []

        if (page.value == 1) selectOptions.value = []

        // 添加新的数据
        selectOptions.value.push(...list)

        // 是否进行加载数据
        hasMore.value = selectOptions.value.length < res.data.count

    } catch (err) {
        console.error(err)
    } finally {
        loading.value = false
    }
}

/**
 * 加载更多数据
 */

const handleLoadMore = _.throttle(async (value: any) => {
    if (!props.userOrgId) {
        proxy.$Message('请选择使用组织，再进行操作！', 'warning')
        return
    }
    page.value = await value
    loadDataList()
}, 500)

/**
 * 模糊搜索
 */
const handleQuerySearch = _.throttle((value: any) => {
    if (!props.userOrgId) return
    // 去空格 大小写
    sreachValue.value = value?.trim().toLowerCase()
    page.value = 1
    // 加载数据
    loadDataList()
}, 500)

/**
 * change
 */
const handleQueryChange = (value: any) => {
    emit('LazyChange', value)
}

/**
 * @实例
 */

watch(
    () => props.value,
    (newValue, oldValue) => {
        selectValue.value = newValue
    },
    { deep: true, immediate: true }
)

defineExpose({
})
</script>
  
<style lang="scss" scoped></style>
  